import React from 'react'
import { useExplainCode } from '@/hooks/useExplainCode'

export default function MultipleBorders() {
  const oCode = useExplainCode();
  return (
    <div>
      <section ref={oCode}>
        <h3 className="font-semibold text-xl mb-1 ">多重边框</h3>
        <div className="mt-4 mb-4 p-4 rounded-md bg-yellow-50">
          <p>
            `box-shadow`相信很多人都已经用透了，可用来给元素添加各种阴影效果，反过来，
            也只有我们需要实现阴影时才会想起它;
          </p>
          <p>
            其实，`box-shadow`还接受第四个参数作为阴影扩张半径，当我们只设置扩张半径时，
            零偏移，零模糊，产生的效果其实相当于一条实线“边框”。
          </p>
          <p>
            `box-shadow`只能模拟实线边框效果，某些情况下，我们可能需要生成虚线的边框效果，
            我们可以通过类似于`border`的描边`outline`和对应的描边偏移`outline-offset`来实现。
          </p>
        </div>
      </section>
      <main className="border">
        <div></div>
        <div></div>
      </main>
      <style jsx>{`
        main{
          width: 100%;
          padding: 0 10vh;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;
        }
        main div:nth-of-type(1) {
          width: 60px; height: 60px;
          border-radius: 50%;
          background: #fafafa;
          margin: 105px 29px;
          box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,  
                      0 0 0 30px #D9CFBB, 0 0 0 40px #D2C6AE,  
                      0 0 0 50px #CABCA0, 0 0 0 60px #C3B393,
                      0 0 0 70px #BBA985, 0 0 0 80px #B4A078;
        }
        main div:nth-of-type(2){
          width: 200px; height: 120px;
          background: #efebe9;
          border: 5px solid #B4A078;
          outline: #B4A078 dashed 1px;
          outline-offset: -10px;
          margin-bottom: 20px;
        }
      `}</style>
    </div>
  )
}
